<template>
  <div class="day-report-search-container">

    <div class="day-report-search-box">
      <img src="./back.png" class="report-search-pic1" onclick="return false" @click="backPage"/>

      <div class="report-search-con">
        <img src="./search-icon.png" class="report-search-pic2"/>
        <input type="text" placeholder="请输入姓名或身份证号" class="report-search-input" v-model="keywords" maxlength="18"/>
      </div>

      <button type="submit" class="report-search-btn" @click="searchKeyWords">搜索</button>
    </div>


    <div class="day-report-search-con-list" ref="wrapper" v-if="showData == 1">
      <div class="day-report-con">
        <div class="day-report-con-item" v-for="(report,index) in dayReportList" :key="index">

          <div class="day-report-con-two" v-if="report.mechanismId">
            <div class="report-con-two-user">
              <span class="report-two-user-name">{{report.userName}}</span><span class="report-two-cert-no">{{report.userCardNumber}}</span>
            </div>
            <div class="report-con-two-company">
              厂别：<span class="report-company-name">{{report.mechanismName}}</span>
            </div>
            <div class="report-con-two-proxy">
              <div class="origin-tel-box">
                <div class="origin-text"><span>来源：</span><span class="report-proxy-name">{{report.source | changeEmpOrigin}}</span>
                </div>
                <div><span>电话：</span><span class="report-proxy-name">{{report.userTel}}</span></div>
              </div>

              <div class="origin-tel-box">
                <div class="origin-text"><span>代理人：</span><span class="report-proxy-name proxy-text">{{report.agentName}}</span>
                </div>
                <div><span>工价：</span><span
                  class="report-proxy-name">{{report.workMoney?`${report.workMoney}元/时`:''}}</span></div>
              </div>
            </div>
            <button type="button" class="report-two-btn"
                    @click="modifyReportEmp2(report.id,report.mechanismId,report.mechanismName,report.workBeginTime,report.agentName)">
              修改
            </button>
          </div>

          <div class="day-report-con-one" v-else>
            <span class="report-one-user-name">{{report.userName}}</span>
            <span class="report-one-cert-no">{{report.userCardNumber}}</span>
            <button type="button" class="report-one-btn" @click="modifyReportEmp1(report.id)">修改</button>
          </div>

        </div>
      </div>
    </div>

    <div class="day-report-empty-wrap" v-if="showData == 2">
      <div class="empty-box">
        <div class="img-box"><img src="../../../assets/img/empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>

  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env";
  import BScroll from 'better-scroll';
  import {getDeviceRatio} from "../../../config/util";

  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /*上拉配置 threshold 触发事件的阀值，即滑动多少距离触发*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  };

  export default {
    data() {
      return {
        showData: 0,
        dayReportList: [],
        reportScroll: null,
        currentPage: 1,
        PageSize: 20,
        noMoreData: false,
        userSign: "",
        keywords: ""
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
    },
    methods: {
      searchKeyWords() {
        if (this.keywords == "" || this.keywords == undefined || this.keywords == null) {
          this.$vux.toast.text("请输入姓名或身份证号", "middle");
          return;
        }

        this.$vux.loading.show({
          text: '加载中',
        });

        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/get_daily_report_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/get_daily_report_list?sgin=" + this.userSign + "&time=" + "&key=" + this.keywords + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.list.length > 0) {
              this.showData = 1;
              this.dayReportList = resultObj.data.list;
              this.$nextTick(() => {
                this.initScroll();
                this.reportScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.reportScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });
            } else {
              this.showData = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });

      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });

          let time = (new Date()).getTime();
          let url = baseUrl + "/resident/get_daily_report_list?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          setTimeout(() => {
            this.axios.get(baseUrl + "/resident/get_daily_report_list?sgin=" + this.userSign + "&time=" + "&key=" + this.keywords + "&page=" + (++this.currentPage) + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0) {
                if (resultObj.data.list.length > 0) {
                  this.dayReportList = this.dayReportList.concat(resultObj.data.list);
                } else {
                  this.noMoreData = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            })
          }, 500)
        }
      },
      initScroll() {//初始化BScroll
        if (!this.reportScroll) {
          this.reportScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.reportScroll.refresh();
        }
      },
      enable() {
        this.reportScroll && this.reportScroll.enable()
      },
      refresh() {
        this.reportScroll && this.reportScroll.refresh()
      },
      finishPullUp() {
        this.reportScroll && this.reportScroll.finishPullUp()
      },
      backPage() {
        this.$router.push("/dayreportlist");
      },
      modifyReportEmp1(reportId) {
        this.$router.push({path: "/reportentryinfo", query: {"reportId": reportId}});
      },
      modifyReportEmp2(reportId, mechanismId, mechanismName, workBeginTime, agentName) {
        this.$router.push({
          path: "/reportentryinfo", query: {
            "reportId": reportId,
            "mechanismId": mechanismId,
            "mechanismName": mechanismName,
            "workBeginTime": workBeginTime,
            "agentName": agentName
          }
        });
      }
    },
    watch: {
      dayReportList() {
        this.$nextTick(() => {
          this.reportScroll.refresh();
        })
      }
    },
    filters: {
      changeEmpOrigin(value) {
        if ("DH" == value) {
          return '大和';
        } else if ("LP" == value) {
          return '蓝聘';
        } else if ("SS" == value) {
          return '上势';
        } else if ("DYH" == value) {
          return '大赢和';
        }
      }
    },
    components: {
      BScroll
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .day-report-search-container
    wh(100%, auto)
    .day-report-search-box
      position: fixed
      top: 0
      display: flex
      align-items: center
      wh(100%, 1.2rem)
      background: #3CAFFF
      z-index: 99
      .report-search-pic1
        padding-left: 0.2rem
        padding-right: 0.267rem
        wh(0.48rem, 0.48rem)
      .report-search-con
        display: flex
        align-items: center
        wh(69.6%, 0.8rem)
        background: #FFF
        border-radius: 0.4rem
        .report-search-pic2
          padding-left: 0.253rem
          padding-right: 0.253rem
          wh(0.533rem, 0.533rem)
        .report-search-input
          wh(80%, 0.6rem)
          line-height: 0.6rem
          size-color(0.4rem, #333)
      .report-search-btn
        margin-left: auto
        margin-right: 0.32rem
        wh(1.44rem, 0.72rem)
        line-height: 0.72rem
        border: 0.027rem solid #FFF
        border-radius: 0.16rem
        size-color(0.4rem, #FFF)
        background: #3CAFFF
    .day-report-search-con-list
      position: absolute
      top: 1.2rem
      bottom: 0
      wh(100%, auto)
      background: #f5f5f5
      .day-report-con
        wh(100%, auto)
        .day-report-con-item
          display: flex
          flex-direction column
          wh(100%, auto)
          .day-report-con-one
            display: flex
            align-items: center
            wh(100%, 1.6rem);
            border-bottom: 0.027rem solid #F5F5F5
            background: #FFF
            .report-one-user-name
              padding-left: 0.32rem
              size-color(0.427rem, #333)
              font-weight: 500
              padding-right: 0.32rem
            .report-one-cert-no
              size-color(0.373rem, #666)
            .report-one-btn
              margin-left: auto
              margin-right: 0.32rem
              wh(1.6rem, 0.8rem)
              text-align: center
              line-height: 0.4rem
              border: 0.027rem solid #3CAFFF
              border-radius: 0.16rem
              size-color(0.4rem, #3CAFFF)
              background: #FFF
          .day-report-con-two
            display: flex
            flex-direction: column
            wh(100%, 3.2rem)
            position: relative
            border-bottom: 0.027rem solid #F5F5F5
            background: #FFF
            .report-con-two-user
              display: flex
              align-items: center
              padding-top: 0.4rem
              padding-left: 0.32rem
              padding-bottom: 0.4rem
              .report-two-user-name
                size-color(0.427rem, #333)
                font-weight: 500
              .report-two-cert-no
                padding-left: 0.32rem
                size-color(0.373rem, #666)
            .report-con-two-company
              display: flex
              align-items: center
              padding-bottom: 0.267rem
              padding-left: 0.32rem
              size-color(0.373rem, #999)
              .report-company-name
                padding-top: 0.05rem
                ellipsis()
                width: 8.25rem
                color: #666
            .report-con-two-proxy
              display flex
              padding-left: 0.32rem
              size-color(0.373rem, #999)
              .report-proxy-name
                color: #666
              .proxy-text
                width: 4rem
                ellipsis()
              .origin-tel-box
                display: flex
                flex-direction: column
                &:first-child
                  width: 4rem
                .origin-text
                  display flex
                  padding-bottom: 0.28rem

            .report-two-btn
              position: absolute
              right: 0.32rem
              top: 0.4rem
              wh(1.6rem, 0.8rem)
              background: #FFF
              text-align: center
              line-height: 0.4rem
              border: 0.027rem solid #3CAFFF
              border-radius: 0.16rem
              size-color(0.4rem, #3CAFFF)
    .day-report-empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: -1
      .empty-box
        wh(4.773rem, auto)
        .img-box
          wh(100%, 4.773rem)
          .empty
            wh(100%, 100%)
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          size-color(0.373rem, rgba(68, 68, 68, 1))
</style>
